<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" th:href="@{/chqimage/favicon.ico}" type="image/x-icon">
    <title>选择调解员</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" th:href="@{/chqcss/choice-mediate.css}">
    <script type="text/javascript" th:src="@{/chqjs/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/chqjs/vue.min.js}"></script>
</head>
<body>
<!--顶部标题...-->
<div id="head">
    <a href="other-dsr.html" class="return_img float_left"><img src="/chqimage/icon-fanh.png" alt=""></a>
    <p class="head_title">我要调解</p>
</div>
<div id="choiceM_box">
    <p class="prompt">关于本次纠纷案就，小崇为您找到了<span>{{m_ready}}</span>名合适的调解员，您可以从中选择<span >{{m_confirm}}</span>名调解员，小崇将在你选择的调解员中制定一名为本次纠纷调解</p>
    <ul class="choiceM_list">
        <li class="choiceM" v-for="mediator in mediatorList">
            <div class="mediator_toux"><img :src="mediator.picture" alt=""></div>
            <div class="mediator_info" @click.stop="show(mediator.id)">
                <p>
                    <span class="mediator_name">{{mediator.name}}</span>
                    <span class="mediator_phone">{{mediator.phone_num}}</span>
                </p>
                <p class="mediator_introduce">{{mediator.introduce}}</p>
            </div>
            <div class="isChoice_box">
                <input type="checkbox" :id="mediator.id" name="check" class="checkbox">
                <label :for="mediator.id" class="labelbox"></label>
            </div>
        </li>
    </ul>
    <a class="next_step" @click="sure">确定</a>
    <!--提示-->
    <div class="prompt prompt2" style="display: none">请选择 <span>{{m_confirm}}</span>名调解员</div>

</div>
<script>
    new Vue({
        el: "#choiceM_box",
        data: {
            mediatorList: [],
            m_ready:'',
            m_confirm:''
        },
        mounted: function () {
            this.$nextTick(function () {
                var _that = this;
                $.ajax({
                    url: '/user/mediators3',
                    type: 'get',
                    datatype: 'json',
                    success: function (result) {
                        _that.mediatorList = result;
                        _that.m_ready = _that.mediatorList.length;
                        _that.m_confirm = _that.mediatorList.length - 1;
                    },
                    error: function (err) {
                        console.log('错误'+err);
                    }
                })
            })
        },
        methods: {
            show: function (mediatorId) {
                var m_id = mediatorId;    //mediator.id
//                console.log("调解员id:" + m_id);
                /*                $.ajax({
                 url:'/user/mediator?m_id='+m_id,
                 type:'get',
                 datatype:'json',
                 success:function (result) {
                 console.log(result);
                 },
                 error:function (err) {
                 console.log(err);
                 }
                 })*/
            },
            sure: function () {
                var choiceM = [];
                $('.checkbox:checked').each(function () {
                    choiceM.push($(this).attr('id'));
                });
                if (choiceM.length !=(this.mediatorList.length - 1) ) {
//                    必须选择来那个嘛调解员，否则显示提示
                    $('.prompt2').css('display', 'block');
                    return false;

                } else {
                    $('.prompt2').css('display', 'none');
                    choiceM = JSON.stringify(choiceM);
                    $.ajax({
                        url: '/user/mediators2',
                        type: 'post',
                        contentType : 'application/json;charset=utf-8',
                        data:choiceM,
                        datatype: 'json',
                        success: function (result) {
//                            console.log(result);
                            window.location.href = '/user/personal';
                        },
                        error: function (err) {
                            console.log('错误'+err);
                        }
                    })
                }

            }
        }
    });


</script>

</body>
</html>